<template>
  <div>
    <div class="blog-list">
      <div
        v-for="(item, index) in collectionList"
        :key="index"
        class="blog-container"
      >
        <div class="blog-top">
          <div class="blog-title" @click="toInfo(item.blogId)">
            {{ item.blogTitle }}
          </div>
          <div class="type">
            分类：<el-tag type="success">{{ item.typeName }}</el-tag>
          </div>
        </div>

        <div class="blog-meta">
          <div class="time">{{ item.createdTime }}</div>
          <div class="meta-container">
            <span class="meta-item"
              ><i class="el-icon-view" /> 阅读:{{ item.blogRead }}
            </span>
            <span class="meta-item"
              ><i class="el-icon-star-off" /> 收藏:{{ item.blogCollection }}
            </span>
            <span class="meta-item"
              ><i class="el-icon-lollipop" /> 点赞:{{ item.blogGoods }}
            </span>
            <span class="meta-item"
              ><i class="el-icon-chat-round" /> 评论:{{ item.blogComment }}
            </span>
          </div>
        </div>
      </div>
      <el-pagination
        class="pageable-container"
        background
        :current-page="params.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getByPage } from "@/api/blog-collection";

export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
      },
      count: 0,
      collectionList: [],
    };
  },
  created() {
    this.getByPage();
  },
  methods: {
    handleSizeChange(val) {
      this.params.limit = val;
    },
    handleCurrentChange(val) {
      this.params.page = val;
    },
    getByPage() {
      getByPage(this.params).then((res) => {
        this.collectionList = res.data;
        this.count = parseInt(res.count);
      });
    },
    // 跳转到详情
    toInfo(id) {
      this.$router.push("/blogInfo/" + id);
    },
  },
};
</script>

<style src="./my-collection.css" scoped>
</style>